<template>
	<view>
		<view class="head">
			<view class="head_left" @tap="back()">
				<image src="../../../static/wode/return.png" mode=""></image>
				<text>返回</text>
			</view>
			<view class="head_mid">
				聊天设置
			</view>
			<view class="head_right">

			</view>
		</view>
		<view class="body_top">
			<view class="people">
				<view class="people_item" v-for="(item,index) in userList" :key='index'>
					<image class="headImg" :src="item.Image" mode=""></image>
					<text>{{item.Nick}}</text>
				</view>
				<image class="addPeople" src="../../../static/jingyou/addto.png" mode=""></image>
			</view>
			<view class="more">
				<text>查看更多</text>
				<image src="../../../static/jingjie/youjiantou.png" mode=""></image>
			</view>
		</view>
		<view class="body_mid">
			<view class="body_mid_item" @tap="showInput('groupName')">
				<text>群聊名称</text>
				<view class="body_mid_right">
					<text>{{groupName}}</text>
					<image src="../../../static/wode/arrow_right.png" mode=""></image>
				</view>
			</view>
			<view class="body_mid_item">
				<text>群二维码</text>
				<image src="../../../static/wode/arrow_right.png" mode=""></image>
			</view>
		</view>
		<view class="body_mid">
			<view class="body_mid_item" @tap="showInput('nickName')">
				<text>我在本群的昵称</text>
				<view class="body_mid_right">
					<text>{{nickName}}</text>
					<image src="../../../static/wode/arrow_right.png" mode=""></image>
				</view>

			</view>
			<view class="body_mid_item">
				<text>消息免打扰</text>
				<switch @change="" />
			</view>
		</view>
		<view class="body_mid">
			<view class="body_bottom_item" @tap="deletTalk">
				清空聊天记录
			</view>
			<view class="body_bottom_item">
				删除并退出
			</view>
		</view>
		<prompt :visible.sync="promptVisible" :placeholder="请输入" :defaultValue="null" @confirm="clickPromptConfirm" mainColor="#e74a39">
			<!-- 这里放入slot内容-->
		</prompt>
	</view>
</template>

<script>
	import webim from '../../../common/webim_wx.min.js'
	import prompt from '../../../components/zz-prompt/index.vue'
	export default {
		components: {
			prompt
		},
		data() {
			return {
				userList: [],
				promptVisible: false, //控制
				groupName: '', //群名称
				nickName: '', //群昵称
			};
		},
		onLoad(option) {
			this.id = option.id
			this.getGroupInfo(this.id)
			// this.getGroupMemberInfo(this.id)
		},
		methods: {
			deletTalk() { //清空聊天记录
				var me = this;
				uni.showActionSheet({
					itemList: ['清空聊天记录'],
					itemColor: '#008AFF',
					success: function(res) {
						var index = res.tapIndex;
						if (index == 0) {

						}
					}
				});
			},
			showInput(type) {
				this.promptVisible = true;
				this.type = type
			},
			clickPromptConfirm(val) {
				console.log(val)
				if (this.type == 'groupName') {
					if (val == '') {
						uni.showToast({
							title: '不能为空',
							icon: 'none'
						})
						return
					}
					this.groupName = val
					this.modifyGroup()
				} else if (this.type == 'nickName') {
					if (val == '') {
						uni.showToast({
							title: '不能为空',
							icon: 'none'
						})
						return
					}
					this.nickName = val
					this.modifyGroupMemberRole()
				}
				this.promptVisible=false
			},
			getGroupInfo(group_id, cbOK, cbErr) { //获取群资料
				var me = this;
				console.log(1111)
				var options = {
					'GroupIdList': [
						group_id
					],
					'GroupBaseInfoFilter': [
						'Type',
						'Name',
						'Introduction',
						'Notification',
						'FaceUrl',
						'CreateTime',
						'Owner_Account',
						'LastInfoTime',
						'LastMsgTime',
						'NextMsgSeq',
						'MemberNum',
						'MaxMemberNum',
						'ApplyJoinOption'
					],
					'MemberInfoFilter': [
						'Account',
						'Role',
						'JoinTime',
						'LastSendMsgTime',
						'ShutUpUntil',
						'NameCard'
					],
				};
				webim.getGroupInfo(
					options,
					function(resp) {
						console.log(resp, '群组资料')
						var uerIdList = []
						me.groupName = resp.GroupInfo[0].Name
						for (var i = 0; i < resp.GroupInfo[0].MemberList.length; i++) {
							uerIdList.push(resp.GroupInfo[0].MemberList[i].Member_Account)
							if(resp.GroupInfo[0].MemberList[i].Member_Account==uni.getStorageSync('user_id')&&resp.GroupInfo[0].MemberList[i].NameCard){
								me.nickName=resp.GroupInfo[0].MemberList[i].NameCard
							}
						}
						me.searchProfileByUserId(uerIdList)
						if (cbOK) {
							cbOK(resp);
						}
					},
					function(err) {
						alert(err.ErrorInfo);
					}
				);
			},
			searchProfileByUserId(idList) { //获取群成员头像信息
				var me = this;
				var tag_list = [
					"Tag_Profile_IM_Nick", //昵称
					// "Tag_Profile_IM_Gender", //性别
					// "Tag_Profile_IM_AllowType", //加好友方式
					"Tag_Profile_IM_Image" //头像
				];
				var options = {
					'To_Account': idList,
					'TagList': tag_list
				};
				webim.getProfilePortrait(
					options,
					function(resp) {
						var data = [];
						console.log(resp, '用户资料')
						if (resp.UserProfileItem && resp.UserProfileItem.length > 0) {
							for (var i in resp.UserProfileItem) {
								var to_account = resp.UserProfileItem[i].To_Account;
								var nick = null,
									gender = null,
									allowType = null,
									imageUrl = null;
								for (var j in resp.UserProfileItem[i].ProfileItem) {
									switch (resp.UserProfileItem[i].ProfileItem[j].Tag) {
										case 'Tag_Profile_IM_Nick':
											nick = resp.UserProfileItem[i].ProfileItem[j].Value;
											break;
										case 'Tag_Profile_IM_Gender':
											switch (resp.UserProfileItem[i].ProfileItem[j].Value) {
												case 'Gender_Type_Male':
													gender = '男';
													break;
												case 'Gender_Type_Female':
													gender = '女';
													break;
												case 'Gender_Type_Unknown':
													gender = '未知';
													break;
											}
											break;
										case 'Tag_Profile_IM_AllowType':
											switch (resp.UserProfileItem[i].ProfileItem[j].Value) {
												case 'AllowType_Type_AllowAny':
													allowType = '允许任何人';
													break;
												case 'AllowType_Type_NeedConfirm':
													allowType = '需要确认';
													break;
												case 'AllowType_Type_DenyAny':
													allowType = '拒绝任何人';
													break;
												default:
													allowType = '需要确认';
													break;
											}
											break;
										case 'Tag_Profile_IM_Image':
											imageUrl = resp.UserProfileItem[i].ProfileItem[j].Value;
											break;
									}
								}
								data.push({
									'To_Account': to_account,
									'Nick': webim.Tool.formatText2Html(nick),
									'Gender': gender,
									'AllowType': allowType,
									'Image': imageUrl
								});
							}
						}
						me.userList = data;
						// $('#search_profile_table').bootstrapTable('load', data);
					},
					function(err) {
						alert(err.ErrorInfo);
					}
				);
			},
			modifyGroup() { //修改群资料
				var options = {
					'GroupId': this.id,
					'Name': this.groupName,
					//'FaceUrl': $('#mg_face_url').val(),
					// 'Notification': $('#mg_notification').val(),
					// 'Introduction': $('#mg_introduction').val(),
					// 'ShutUpAllMember': $('#shut_up_all_member').val() //新增群组全局禁言。参数为：On和Off
				};
				webim.modifyGroupBaseInfo(
					options,
					function(resp) {
						//在表格中修改对应的行
						uni.showToast({
							title: '修改成功',
							icon: 'none'
						});
					},
					function(err) {
						alert(err.ErrorInfo);
					}
				);
			},
			modifyGroupMemberRole () {//修改群昵称
				var options = {
					'GroupId': this.id,
					'Member_Account':uni.getStorageSync('user_id').toString(),
					'NameCard': this.nickName
				};
				webim.modifyGroupMember(
					options,
					function(resp) {
						//在表格中修改对应的行              
						uni.showToast({
							title:'修改成功',
							icon:'none'
						})
					},
					function(err) {
						console.log(err.ErrorInfo);
					}
				);
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		},
	}
</script>

<style scoped>
	.head {
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: 162upx;
		background: #ffffff;
		padding: 0 24upx;
		z-index: 200;
		position: fixed;
		left: 0;
		top: 0;
	}

	.head image {
		width: 20upx;
		height: 36upx;
		margin-right: 9upx;
	}

	.head_left {
		height: 82upx;
		width: 106upx;
		display: flex;
		align-items: center;
		line-height: 82upx;
		color: #666666;
		font-size: 32upx;
		padding-top: 70upx;
	}

	.head_mid {
		padding-top: 90upx;
	}

	.head_right {
		width: 106upx;
	}

	.body_top {
		padding-top: 148upx;
	}

	.people {
		display: flex;
		flex-wrap: wrap;
	}

	.people_item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20upx 24upx 28upx 20upx;
	}

	.people_item text {
		max-width: 98upx;
		color: #333333;
		font-size: 20upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap
	}

	.headImg {
		width: 106upx;
		height: 106upx;
		border-radius: 50%;
		overflow: hidden;
	}

	.addPeople {
		width: 106upx;
		height: 106upx;
		padding-top: 20upx;
		padding-left: 24upx;
	}

	.more image {
		width: 20upx;
		height: 20upx;
	}

	.more text {
		color: #333333;
		font-size: 20upx;
	}

	.more {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 30upx;
	}

	.body_mid {
		margin-top: 20upx;
	}

	.body_mid_item {
		background: #FFFFFF;
		padding: 24upx 24upx;
		border-bottom: 1upx solid #E6E6E6;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32upx;
		color: #333333;
	}

	.body_top_item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 88upx;
		line-height: 88upx;
		padding: 0 24upx;
		border-bottom: 1upx solid #E6E6E6;
		background: #FFFFFF;
	}

	.body_mid_item image {
		width: 18upx;
		height: 32upx;
	}

	.body_bottom_item {
		background: #FFFFFF;
		color: #46CECF;
		padding: 24upx 24upx;
		text-align: center;
		border-bottom: 1upx solid #E6E6E6;
		font-size: 32upx;
	}

	.body_mid_right {
		display: flex;
		/* justify-content: space-between; */
		justify-content: flex-end;
		align-items: center;
		width: 400upx;
	}

	.body_mid_right text {
		margin-right: 20upx;
	}
</style>
